<template>
  <div class="fishery-dashboard">
    <!-- 仪表板标题 -->
    <div class="dashboard-header">
      <h1>🐟 渔业智能监控仪表板</h1>
      <div class="header-controls">
        <el-button type="primary" size="small" @click="refreshData">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
        <el-button type="success" size="small" @click="exportReport">
          <i class="el-icon-download"></i> 导出报表
        </el-button>
        <el-dropdown trigger="click">
          <el-button type="info" size="small">
            时间范围 <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="setTimeRange('hour')">最近1小时</el-dropdown-item>
            <el-dropdown-item @click.native="setTimeRange('day')">最近24小时</el-dropdown-item>
            <el-dropdown-item @click.native="setTimeRange('week')">最近7天</el-dropdown-item>
            <el-dropdown-item @click.native="setTimeRange('month')">最近30天</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 核心指标面板 -->
    <panel-group 
      @handleSetLineChartData="handleSetLineChartData" />

    <!-- 趋势图表 -->
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <div class="chart-title">
        <h3>🌊 环境参数趋势分析</h3>
        <el-radio-group v-model="chartType" size="mini" @change="handleChartTypeChange">
          <el-radio-button label="newVisitis">水温</el-radio-button>
          <el-radio-button label="messages">pH值</el-radio-button>
          <el-radio-button label="purchases">溶氧量</el-radio-button>
          <el-radio-button label="shoppings">鱼类数量</el-radio-button>
        </el-radio-group>
      </div>
      <line-chart :chart-data="lineChartData" />
    </el-row>


    <!-- 传统图表区域（保留原有图表） -->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-header">
            <h4>🎯 检测精度雷达图</h4>
          </div>
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-header">
            <h4>🐟 品种分布饼图</h4>
          </div>
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-header">
            <h4>📊 系统状态柱图</h4>
          </div>
          <bar-chart />
        </div>
      </el-col>
    </el-row>

    <!-- 实时数据流 -->
    <el-row :gutter="32" class="realtime-section">
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="realtime-card">
          <div slot="header" class="realtime-header">
            <span>🎥 实时视频监控</span>
            <el-tag :type="videoStatus ? 'success' : 'danger'" size="mini">
              {{ videoStatus ? '监控中' : '已停止' }}
            </el-tag>
          </div>
          <div class="video-container">
            <div class="video-placeholder" v-if="!videoStatus">
              <i class="el-icon-video-camera-solid"></i>
              <p>点击启动实时监控</p>
              <el-button type="primary" @click="startVideoMonitor">启动监控</el-button>
            </div>
            <div class="video-stream" v-else>
              <div class="video-overlay">
                <div class="detection-info">
                  <div class="info-item">
                    <span class="label">检测到鱼类:</span>
                    <span class="value">{{ realTimeData.fishCount }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">检测精度:</span>
                    <span class="value">{{ realTimeData.accuracy }}%</span>
                  </div>
                  <div class="info-item">
                    <span class="label">处理帧率:</span>
                    <span class="value">{{ realTimeData.fps }} FPS</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="data-card">
          <div slot="header" class="data-header">
            <span>💾 实时数据流</span>
            <el-switch v-model="dataStream" active-text="开启" inactive-text="关闭"></el-switch>
          </div>
          <div class="data-stream" v-if="dataStream">
            <div class="data-item" v-for="(item, index) in streamData" :key="index" :class="'data-' + item.type">
              <span class="time">{{ item.time }}</span>
              <span class="type">{{ item.typeName }}</span>
              <span class="value">{{ item.value }}</span>
              <span class="unit">{{ item.unit }}</span>
            </div>
          </div>
          <div v-else class="no-data">
            <i class="el-icon-warning-outline"></i>
            <p>数据流已关闭</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'

const fisheryChartData = {
  newVisitis: {
    expectedData: [22.5, 23.2, 24.1, 25.2, 26.1, 25.3, 24.3],
    actualData: [23.1, 23.8, 24.5, 25.8, 26.3, 25.1, 24.1],
    unit: '°C',
    name: '水温'
  },
  messages: {
    expectedData: [7.0, 7.1, 7.2, 7.3, 7.2, 7.1, 7.2],
    actualData: [7.2, 7.1, 7.3, 7.4, 7.2, 7.0, 7.2],
    unit: '',
    name: 'pH值'
  },
  purchases: {
    expectedData: [8.0, 8.2, 8.5, 8.8, 8.6, 8.4, 8.5],
    actualData: [8.3, 8.1, 8.7, 8.9, 8.6, 8.4, 8.5],
    unit: 'mg/L',
    name: '溶氧量'
  },
  shoppings: {
    expectedData: [1200, 1220, 1180, 1240, 1260, 1250, 1246],
    actualData: [1210, 1235, 1195, 1256, 1278, 1262, 1246],
    unit: '条',
    name: '鱼类数量'
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      currentTimeRange: 'day',
      chartType: 'newVisitis',
      lineChartData: fisheryChartData.newVisitis,
      videoStatus: false,
      dataStream: true,
      
      // 实时数据
      realTimeData: {
        fishCount: 1246,
        accuracy: 94.7,
        fps: 15
      },
      
      // 数据流
      streamData: [
        { time: '14:30:45', type: 'temp', typeName: '水温', value: '24.3', unit: '°C' },
        { time: '14:30:40', type: 'ph', typeName: 'pH值', value: '7.2', unit: '' },
        { time: '14:30:35', type: 'oxygen', typeName: '溶氧量', value: '8.5', unit: 'mg/L' },
        { time: '14:30:30', type: 'fish', typeName: '鱼类数', value: '1246', unit: '条' },
        { time: '14:30:25', type: 'temp', typeName: '水温', value: '24.2', unit: '°C' },
      ],
      
    }
  },
  
  computed: {},
  
  mounted() {
    // 模拟数据流更新
    if (this.dataStream) {
      this.startDataStream()
    }
  },
  
  methods: {
    handleSetLineChartData(type) {
      this.chartType = type
      this.lineChartData = fisheryChartData[type] || fisheryChartData.newVisitis
    },
    
    refreshData() {
      this.$message.success('数据已刷新')
      // 这里可以调用API刷新数据
    },
    
    exportReport() {
      this.$message.success('报表导出中...')
      // 这里实现报表导出功能
    },
    
    setTimeRange(range) {
      this.currentTimeRange = range
      this.$message.info(`时间范围已设置为: ${this.getTimeRangeText(range)}`)
    },
    
    getTimeRangeText(range) {
      const rangeMap = {
        'hour': '最近1小时',
        'day': '最近24小时', 
        'week': '最近7天',
        'month': '最近30天'
      }
      return rangeMap[range] || '最近24小时'
    },
    
    startVideoMonitor() {
      this.videoStatus = true
      this.$message.success('视频监控已启动')
      
      // 模拟实时数据更新
      setInterval(() => {
        if (this.videoStatus) {
          this.realTimeData.fishCount = 1200 + Math.floor(Math.random() * 100)
          this.realTimeData.accuracy = 92 + Math.random() * 6
          this.realTimeData.fps = 12 + Math.floor(Math.random() * 6)
        }
      }, 2000)
    },
    
    startDataStream() {
      setInterval(() => {
        if (this.dataStream) {
          const now = new Date()
          const time = now.toTimeString().slice(0, 8)
          
          const dataTypes = [
            { type: 'temp', typeName: '水温', value: (23 + Math.random() * 4).toFixed(1), unit: '°C' },
            { type: 'ph', typeName: 'pH值', value: (6.8 + Math.random() * 0.8).toFixed(1), unit: '' },
            { type: 'oxygen', typeName: '溶氧量', value: (8 + Math.random() * 2).toFixed(1), unit: 'mg/L' },
            { type: 'fish', typeName: '鱼类数', value: (1200 + Math.floor(Math.random() * 100)).toString(), unit: '条' }
          ]
          
          const newData = dataTypes[Math.floor(Math.random() * dataTypes.length)]
          newData.time = time
          
          this.streamData.unshift(newData)
          if (this.streamData.length > 20) {
            this.streamData.pop()
          }
        }
      }, 3000)
    },
    
    // 处理图表类型切换
    handleChartTypeChange(type) {
      this.handleSetLineChartData(type)
    }
  }
}
</script>

<style lang="scss" scoped>
.fishery-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  position: relative;
  min-height: calc(100vh - 84px);

  // 仪表板标题
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;

    h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
    }

    .header-controls {
      display: flex;
      gap: 10px;

      .el-button {
        color: white;
        border-color: rgba(255, 255, 255, 0.3);

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }

  // 图表标题
  .chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h3 {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }
  }


  // 图表容器
  .chart-wrapper {
    background: #fff;
    padding: 20px;
    margin-bottom: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .chart-header {
      margin-bottom: 20px;
      
      h4 {
        margin: 0;
        font-size: 16px;
        color: #303133;
        font-weight: 600;
      }
    }
  }

  // 实时数据区域
  .realtime-section {
    margin-top: 32px;

    .realtime-card, .data-card {
      height: 400px;

      .realtime-header, .data-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        span {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .video-container {
        height: 320px;
        position: relative;
        background-color: #000;
        border-radius: 8px;
        overflow: hidden;

        .video-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          color: #909399;

          i {
            font-size: 48px;
            margin-bottom: 16px;
          }

          p {
            margin: 0 0 16px 0;
            font-size: 16px;
          }
        }

        .video-stream {
          height: 100%;
          background: linear-gradient(45deg, #1e3c72, #2a5298);
          position: relative;

          .video-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;

            .detection-info {
              .info-item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                color: white;
                font-size: 14px;

                .label {
                  margin-right: 10px;
                }

                .value {
                  font-weight: bold;
                }
              }
            }
          }
        }
      }

      .data-stream {
        height: 320px;
        overflow-y: auto;

        .data-item {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          border-bottom: 1px solid #EBEEF5;
          transition: background-color 0.3s;

          &:hover {
            background-color: #F5F7FA;
          }

          .time {
            width: 80px;
            font-size: 12px;
            color: #909399;
          }

          .type {
            width: 80px;
            font-size: 14px;
            color: #303133;
          }

          .value {
            flex: 1;
            font-size: 16px;
            font-weight: bold;
            text-align: right;
          }

          .unit {
            width: 40px;
            text-align: right;
            font-size: 12px;
            color: #909399;
          }

          &.data-temp {
            .value { color: #E6A23C; }
          }

          &.data-ph {
            .value { color: #409EFF; }
          }

          &.data-oxygen {
            .value { color: #67C23A; }
          }

          &.data-fish {
            .value { color: #F56C6C; }
          }
        }
      }

      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 320px;
        color: #909399;

        i {
          font-size: 48px;
          margin-bottom: 16px;
        }

        p {
          margin: 0;
          font-size: 16px;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 16px;
    }

    .dashboard-header {
      flex-direction: column;
      text-align: center;

      .header-controls {
        margin-top: 15px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    .dashboard-header {
      padding: 16px;
      
      h1 {
        font-size: 20px;
      }
    }

  .chart-wrapper {
      padding: 12px;
    }

    .realtime-section {
      .realtime-card, .data-card {
        margin-bottom: 20px;
      }
    }
  }
  
  // 动画效果
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(103, 194, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(103, 194, 58, 0); }
  }
  
  @keyframes newItemGlow {
    0% { box-shadow: 0 0 10px rgba(103, 194, 58, 0.6); }
    50% { box-shadow: 0 0 20px rgba(103, 194, 58, 0.8); }
    100% { box-shadow: 0 0 10px rgba(103, 194, 58, 0.6); }
  }
}
</style>

